<template>
    <div class="category">


        <el-collapse v-model="activeNames">
            <!--        tagsList-->
            <el-collapse-item title="分类列表" name="tagsList">
                <div v-if="categoryTree.length!=0" class="tagsPart">

                    <el-tree
                            :data="categoryTree"
                            :props="defaultProps"
                            accordion
                            :highlight-current="true"
                            @node-click="handleNodeClick">
                    </el-tree>


                </div>
            </el-collapse-item>

            <!--        CategoryInfo-->
            <el-collapse-item title="分类信息" name="tagsInfo" v-if="categoryInfo!=null">
                <div>
                    <el-card>
                        <div>
                            标签名: {{categoryInfo.categoryName}}
                            描述: {{categoryInfo.categoryDesc}}
                        </div>
                    </el-card>
                </div>
            </el-collapse-item>
        </el-collapse>

        <div v-if="articleList.length!=0">
            <!--        文章列表-->
            <ArticleList :articleList="articleList"></ArticleList>

            <!--    分页插件-->
            <div  class="block" style="text-align: center; margin-top: 20px">
                <el-pagination
                        @current-change="handleCurrentChange"
                        :current-page.sync="pageNum"
                        :page-size="pageSize"
                        layout="prev, pager, next, jumper"
                        :total="total">
                </el-pagination>
            </div>

        </div>

        <div v-if="articleList.length==0">
            <h3 style="color: #F56C6C">暂无该分类相关文章</h3>
        </div>
    </div>

</template>

<script>
    import https from "../../../https";
    // 导入
    import ArticleList from '../../components/articleList'
    export default {
        name: "category",
        data() {
            return {
                categoryId: this.$route.params,
                categoryTree:[],
                defaultProps:{'label':'categoryName','children':'children'},
                categoryInfo: null,
                articleList: [],
                pageNum:1,    //当前页
                pageSize:10,   //每页条数
                pages:0, //总页数
                total: 0,     //总数据
                tagsStyle: ['success', 'info', 'warning', 'danger'],
                activeNames: ['tagsList','tagsInfo']
            }
        },
        mounted: function () {
            this.getArticleListByCategoryId()
            this.getCategoryTree()
        },
        methods: {
            /**
             * 获取文章列表数据
             */
            getArticleListByCategoryId() {

                https.fetchGet('/article/listByCategoryId/' + this.categoryId + '/' +  this.pageNum + '/' + this.pageSize).then((res) => {


                    if (res.data.code == 200) {

                        const {data} = res.data
                        console.log(data)
                        // 更新数据
                        this.articleList = data.records //数据
                        this.pageNum = parseInt(data.current) //当前页
                        this.pageSize = parseInt(data.size)    //每页条数
                        this.pages = parseInt(data.pages)    //总页数
                        this.total = parseInt(data.total)   //总条数
                    }
                }).catch((err) => {
                    console.log(err);
                })

            },


            /**
             * 获取分类信息
             * */
            getCategoryTree(){
                https.fetchGet('/category/list/tree').then((res) => {


                    if (res.data.code == 200) {

                        const {data} = res.data
                        this.categoryTree = data
                    }
                }).catch((err) => {
                    console.log(err);
                })
            },


            /**
             * 跳转到文章详情页
             * @param articleId
             */
            toArticleDetail(articleId){
                console.log(articleId)
                this.$router.push({
                    path: `/articles/articleDetail/${articleId}`
                })
            },

            /**
             * 触发其他页
             * @param val
             */
            handleCurrentChange(val) {
                this.pageNum = val
                this.getArticleListByCategoryId();
            },


            /**
             * 点击树状按钮
             * @param data
             */
            handleNodeClick(data) {
                console.log(data);
                this.categoryInfo = data
                this.categoryId = data.id
                this.getArticleListByCategoryId()
            }
        },
        components:{ArticleList},
        watch:{
            "$route.params"(newVal,oldVal){
                if (newVal.categoryId != oldVal.categoryId){
                    this.categoryId = newVal.categoryId
                }
            }
        }
    }
</script>

<style scoped>

    .tagsPart .el-tag {
        margin: 5px 8px
    }
</style>
